﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery EasyUI Extensions - Sample</title>

    <link href="../../jquery-easyui-themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../jquery-easyui-themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../../jquery/jquery-1.11.2.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.4.2/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../../jquery-extensions/jquery.jdirk.js" type="text/javascript"></script>
    <link href="../../jeasyui-extensions/jeasyui.extensions.css" rel="stylesheet" />

    <script src="../../jeasyui-extensions/jeasyui.extensions.js"></script>

    <script type="text/javascript">
        $(function () {
            
            $("#btn1").click(function () {
                $.easyui.loading();
                $.util.delay(function () { $.easyui.loaded(); }, 2000);
            });

            $("#btn2").click(function () { $.easyui.loading({ locale: "#north", msg: "loading..." }); });

            $("#btn3").click(function () { $.easyui.loading({ locale: "#south", msg: "south is loading..." }); });

            $("#btn4").click(function () { $.easyui.loading({ locale: "#box", msg: "box is loading..." }); });


            $("#btn11").click(function () { $.easyui.loaded(); });

            $("#btn12").click(function () { $.easyui.loaded("#north"); });

            $("#btn13").click(function () { $.easyui.loaded("#south"); });

            $("#btn14").click(function () { $.easyui.loaded("#box"); });


            //alert(JSON.stringify($.messager.defaults));
        });
    </script>
</head>
<body class="easyui-layout" data-options="fit: true">
    <div id="north" data-options="region: 'north', title: 'north', split: true" style="height: 100px;"></div>

    <div id="west" data-options="region: 'west', title: 'west', split: true" style="width: 200px;"></div>

    <div id="center" data-options="region: 'center', title: 'center', split: true" style="padding: 20px;">

        <input id="btn1" type="button" value="loading" />
        <input id="btn2" type="button" value="loading-north" />
        <input id="btn3" type="button" value="loading-south" />
        <input id="btn4" type="button" value="loading-box" />
        <br /><br />
        <input id="btn11" type="button" value="loaded" />
        <input id="btn12" type="button" value="loaded-north" />
        <input id="btn13" type="button" value="loaded-south" />
        <input id="btn14" type="button" value="loaded-box" />

        <hr />
        <div id="box" class="easyui-resizable" style="width: 300px; height: 200px; border: 1px solid black;">
            <input id="aaa" />
        </div>
    </div>

    <div id="east" data-options="region: 'east', title: 'east', split: true" style="width: 200px;">
        <table class="easyui-datagrid" data-options="fit: true, singleSelect:true, border: false">
            <thead>
                <tr>
                    <th data-options="field: 'id', width: 50">ID</th>
                    <th data-options="field: 'name', width: 60">Name</th>
                </tr>
            </thead>
        </table>
    </div>

    <div id="south" data-options="region: 'south', title: 'south', split: true" style="height: 100px;"></div>
</body>
</html>
